<template>
  <div class="container">
    <!--  -->
     
       
    <!--  -->
      <div class="children"  v-if="active===0">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in banners" :key="index">
              <img :src="item.img"/>
          </van-swipe-item>
        </van-swipe>

        <div class="product-list-row">
            <div class="product-list-row-img">
                <img src="//img10.360buyimg.com/mobilecms/s280x280_jfs/t1/119060/13/5694/100700/5eb60bd4ef5d1db68/ce9984f824ca2e95.jpg!q70.dpg.webp" alt="">
            </div>
            <div class="product-list-row-info">
                <div class="info info-name">奇尔飞煌 玩具儿童初学尤克里里仿真吉他玩具可弹奏早教启蒙玩具 吉他 小黄鸭</div>
                <div class="info info-icons">音乐启蒙 早教学习</div>
                <div class="info info-p"></div>
                <div class="info info-bottom">
                  <div class="price">$3.33</div>
                  <div class="price">$3.33</div>
                </div>
            </div>
        </div>

        <div class="container-productlist">
          <a
            :href="'/#/Detail/'+item.id"
            class="proguct-list"
            v-for="(item,index) in productitem"
            :key="index"
            @click="gotoDetail()"
          >
            <div class="proguct-img">
              <img :src="item.mainImage" alt />
            </div>
            <div class="proguct-name">{{item.subtitle}}</div>
            <div class="proguct-price">
              <span class="price">￥{{item.price}}</span>
              <span>活动类似</span>
            </div>
          </a>
        </div>

        
      </div>
    
    <!--  -->
  </div>
</template>
<script>
export default {
    name: 'NavMenuList',
    components: { },
    props:['activeMenu'],
    data() {
      return {
        active:0,
        scrollcontent:[
          {
            id:0,
            title:'手机'
          },{
            id:1,
            title:'电脑'
          },{
            id:2,
            title:'背包'
          },{
            id:3,
            title:'电视机'
          },{
            id:4,
            title:'路由器'
          },{
            id:5,
            title:'数码配件'
          },{
            id:6,
            title:'日用百货'
          },{
            id:7,
            title:'服务'
          },{
            id:8,
            title:'零售店'
          }
        ],
            //Swiper
        banners: [ 
          {
              id:0,
              img:'https://t16img.yangkeduo.com/pdd_oms/2019-06-30/67eb445788fa7bee29ffcab9531c1af2.jpg?imageMogr2/strip%7CimageView2/2/w/750/q/80'
          },{
              id:1,
              img:'https://t16img.yangkeduo.com/pdd_oms/2019-06-30/37331eece3774031bb1fd79bb76ce466.jpg?imageMogr2/strip%7CimageView2/2/w/750/q/80'
          },{
              id:2,
              img:'https://t00img.yangkeduo.com/goods/2019-11-20/0c7cbcf6a07241f8ac9feea5002a498e.jpeg?imageMogr2/strip%7CimageView2/2/w/750/q/80'
          },{
              id:3,
              img:'https://t00img.yangkeduo.com/goods/2020-02-26/84e0bae0b6461594409c6eb80e447a44.jpeg?imageMogr2/strip%7CimageView2/2/w/750/q/80'
          }
        ],
        swiperOption: {
            // 参数选项,显示小点
            pagination: {
                el: '.swiper-pagination'
            },
            //循环
            loop:true,
            //每张播放时长3秒，自动播放
            autoplay:true,
            //滑动速度
            speed:500,
            // delay:1000
      
        },
        ////////-
        productitem: [ ]
      } 
    },
    mounted() {
      this.getProductList()
      
    },
    methods: {
        
        handleClick(index){
            this.active = index;
            console.log(index)
        },
        getProductList() {
            this.axios.get("/products", {
            params: {
                categoryId: "100012",
                pageSize: 6
            }
            }).then(res => {
            // this.activeMenu = res.data.id
            this.productitem = res.data.list;
            console.log(res);
            });
        }

    }
}
</script>

<style lang="scss" scoped>
.container{
  width:100vw;
  height:100vh;
  background:#eee;
  
  .children{
    //Swiper
    .my-swipe .van-swipe-item {
      img{
          width:100vw;
      }
    }
    
    //productlist
    .container-productlist {
      padding: 0 2vw 2vh 2vw;
      box-sizing: border-box;
      background: #eee;
      font-size: 0.7rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .proguct-list {
        width: 46vw;
        background-color: #fff;
        border-radius: 0.8rem;
        margin-top: 1vh;
        .proguct-img {
          img {
            width: 46vw;
            border-radius: 0.8rem 0.8rem 0 0;
          }
        }
        .proguct-name {
          width: 44vw;
          text-align: center;
          padding: 0 1vw;
          box-sizing: border-box;
          line-height: 4vh;
          white-space: nowrap;
          overflow: hidden;
          margin: 0 1vw;
          color: #666;
        }
        .proguct-price {
          width: 46vw;
          text-align: center;
          line-height: 4vh;
          color: #666;

          span {
            display: inline-block;
            width: 22vw;
          }
          .price {
            color: #f20;
          }
        }
      }
    }
    
    //product-list-row
    .product-list-row{
      height:20vh;
      display:flex;
      position: relative;
      padding: .25rem .5rem;
      box-sizing:border-box;
      background: #fff;
      overflow: hidden;
      .product-list-row-img{
        flex:1;
          img{
            width:100%;
            border-radius:8%;
          }
      }
      .product-list-row-info{
        padding:0 0 0 0.8em;
        box-sizing:border-box;
        flex:1.8;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        font-size:0.7rem;
        .info-name{
          height:2rem;
          line-height:1rem;
          overflow:hidden;
          color: #999;
        }
        .info-icons{
          height:1rem;
          line-height:1rem;
        }
        .info-p{
          height:1rem;
          line-height:1rem;
        }
        .info-bottom{
          height:2rem;
          line-height:1rem;

          .price{
            color:#f40;
            line-height:1rem;
          }
        }
      }
    }
  
  }
}
</style>
